<template>
	<view class="container">
		<view class="doctor-detail">
			<image class="doctor-avatar" src="/static/images/doctor.png" mode="aspectFill"></image>
			<text class="doctor-name">医生{{ doctorId }}</text>
			<text class="doctor-title">主任医师</text>
			<view class="doctor-tags">
				<text class="doctor-tag">内科</text>
				<text class="doctor-tag">心脏</text>
			</view>
			<text class="doctor-description">这里是医生详情内容，可以根据实际需求进行扩展。</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			doctorId: null
		}
	},
	onLoad(options) {
		this.doctorId = options.id;
	}
}
</script>

<style lang="scss" scoped>
.container {
	padding: 30rpx;
}
.doctor-detail {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 20rpx;
	box-shadow: 0 5rpx 20rpx rgba(52, 152, 219, 0.1);
	text-align: center;
}
.doctor-avatar {
	width: 150rpx;
	height: 150rpx;
	border-radius: 50%;
	margin-bottom: 20rpx;
}
.doctor-name {
	font-size: 34rpx;
	font-weight: 600;
	margin-bottom: 10rpx;
}
.doctor-title {
	font-size: 24rpx;
	color: #a5b1c2;
	margin-bottom: 20rpx;
}
.doctor-tags {
	display: flex;
	justify-content: center;
	margin-bottom: 20rpx;
}
.doctor-tag {
	background-color: #ebf5fb;
	color: #3498db;
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	border-radius: 8rpx;
	margin: 0 10rpx;
}
.doctor-description {
	font-size: 28rpx;
}
</style> 